import { Form } from "../model/base/form";
import { List } from "../model/base/list";
import { h, type VNode } from "vue";
import { ElCascader } from "element-plus";
import type { RuleItem } from "async-validator";
import type { listButton } from "@b/model/base/type";
import { pagebuttonStore } from "@b/store";

export class Rolelist extends List<interfaceRole> {
    constructor() {
        super()
        this.baseUrl = "/role"
        this.hasPages = false
        this.title = "身份列表"
        this.labels = {
            name: { prop: "name", label: "名称", type: 'text', width: 120 },
            remark: { prop: "remark", label: "备注", type: 'text' },
            createTime: { prop: "createTime", label: "创建时间", type: 'text', overflow: true },
        }
        this.editButton = () => {
            const but = pagebuttonStore().button
            const buttons: VNode[] = []
            if (but.has('base:role:add')) {
                buttons.push(h('div', {
                    className: 'textbutton', onClick: this.add
                }, but.get('base:role:add')))
            }
            return buttons
        }
        this.actions = () => {
            const actions: listButton<interfaceRole>[] = []
            const but = pagebuttonStore().button
            if (but.has('base:role:delete')) {
                actions.push({
                    text: but.get('base:role:delete') || '', type: 'danger', hasConfirm: true, onClick: (data, index) => {
                        this.deleteItem(index)
                        this.recache()
                    },
                })
            }
            if (but.has('base:role:update')) {
                actions.push({
                    text: but.get('base:role:update') || '', type: 'primary', onClick: (data) => {
                        this.edit(data.id)
                    },
                })
            }
            return actions
        }
    }

    recache() {
        this.request('/role/select', { method: 'GET', cache: 'recacheGlobal' })
    }
    edit(_id?: number) {
        console.log(_id)
        throw new Error('未设置修改函数')
    }
    add(_id?: number) {
        console.log(_id)
        throw new Error('未设置新增函数')
    }
}
export class Rolefrom extends Form<interfaceRole> {
    constructor() {
        super()
        this.baseUrl = "/role"
        this.label_width = "6em"
        this.data.departmentIdList = []
    }
    async getMenus() {
        return await this.request('/menu/tree', { method: 'GET', cache: 'cache' })
    }
    setLabels(menus: any) {
        const vName: RuleItem[] = [{ type: 'string', required: true, message: '名称不能为空' },
        { type: 'string', validator: (rule, value) => value ? value.length < 12 : false, message: '身份名最多12位' }]
        this.rule = {
            name: vName,
        }
        this.setItem({
            name: {
                prop: "name", label: "名称",
                type: 'text',
                required: true,
                rule: Form.getVantRule(vName)
            },
            menuIds: {
                prop: "menuIds", label: "访问权限", overflow: true,
                link: true,
                type: 'customize',
                show: ({ type }) => type === 'form',
                vform: ({ prop, data, value }) => {
                    return h(ElCascader, {
                        collapseTags: true, modelValue: value,
                        options: menus, props: {
                            multiple: true,
                            value: 'id',
                            label: 'name',
                            children: 'childMenus',
                            checkStrictly: true,
                            emitPath: false
                        }, onChange: (val) => {
                            data[prop] = val as number[]
                        }
                    })
                }
            },
            remark: {
                prop: "remark", label: "备注",
                type: 'text',
                required: true
            },
            createTime: {
                prop: "createTime", label: "创建时间", overflow: true,
                type: 'text',
                show: ({ type }) => type === 'detail'
            },
        }, this.labels)
    }
    async init() {
        const menus = await this.getMenus()
        this.setLabels(menus)
    }
}